<template>
  <div>
    <f-select
      class="w300"
      v-model:value="select"
      isModelValueChange
      :query="apiServe"
      @optionsChange="optionsChange"
      @change="handleChange">
      <template #option="option">
        <div>
          + {{ option.label }} =
        </div>
      </template>
    </f-select>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const select = ref();

// setTimeout(() => {
//   select.value = '3212';
// }, 1000 * 2);

const apiServe = () =>
  new Promise((resolve, reject) => {
    resolve([
      { label: '异步数据1', value: '1212' },
      { label: '异步数据2', value: '2212' },
      { label: '异步数据3', value: '3212' },
      { label: '异步数据4', value: '4212' }
    ]);
  });

const optionsChange = (data) => {
  console.log('optionsChange', data);
};

const handleChange = (v, p) => {
  console.log('+++ handleChange', v, p);
};

</script>
